<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="email=no" />
    <title>王者争霸FA</title>
    <script src="/Public/js/public.js"></script>
    <link rel="stylesheet" href="/Public/css/common.css">
    <style type="text/css">
        #con{width:100%;height:100%;box-sizing: border-box; -webkit-box-sizing:border-box; padding-top:4.4rem; background:url("/Public/images/loginBg.png") no-repeat left top;background-size:100% 100%}
        .loginBtn{margin:0.6rem auto;width:1.94rem; line-height:0.56rem; border:0.01rem solid #fff;border-radius:0.48rem;text-align:center;color:#fff; font-size:0.30rem;}
        .infoBox{margin:0 auto; background:#fff;border-radius:0.4rem; margin-bottom:0.4rem; width:4.26rem; height:0.8rem; padding-left:0.3rem; padding-right:0.02rem; }
        .info-value{ float:left; width:100%; height:0.8rem; line-height:0.8rem; color:#333; font-size:0.30rem;}
        #yzm_value{  width:2.0rem;  }
        .getBtn{float:right;height:0.76rem;margin-top:0.02rem;width:1.6rem;text-align:center;line-height:0.76rem; border-radius:0.4rem; background:#1ec8ff; color:#fff; font-size:0.22rem; }
        .btn_actived{background:#f1f1f1; color:#999; font-size:0.30rem;}
        #submitBtn{display:block; margin:0 auto; margin-top:0.5rem; width:4.56rem;line-height:0.8rem;text-align:center;background:#ff01bd; color:#fff; border-radius:0.4rem;}
        
        .layui-m-layer-msg .layui-m-layercont {background:rgba(255,255,255,0.9); color:red;}
    </style>
</head>
<body ontouchstart>
    <div id="con">
        <p class="loginBtn">王者注册</p>
        <p class="infoBox"><input id="tel_value" class="info-value" type="tel" placeholder="请输入手机号" maxlength="11"></p>
        <p class="infoBox"><input id="yzm_value" class="info-value"  type="text" placeholder="请输入验证码"><button id="getBtn" class="getBtn" type="button">获取验证码</button></p>
        <input type="hidden" name="openid" value="<?php echo ($openid); ?>" id="openid"/>
        <button type="button" id="submitBtn">提交</button>
    </div>
    <script src="/Public/js/jquery1.11.1.min.js"></script>
    <script src="/Public/js/fastclick.min.js"></script>
    <script src="/Public/js/layer.js"></script>
    <script type="text/javascript">
        $(function(){
            FastClick.attach( document.body );  
            var Page = function(){};
            $.extend(Page.prototype , {
                init : function(){
                    this.bindEvents();
                },
                bindEvents : function(){
                    var telReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
                    var _self = this;
                    var flag = false; // 是否获取过验证码, 默认否
                    $("#getBtn").on("click",function(){
                        var tel_value = $("#tel_value").val();
                        var _time = 60;
                        if(!telReg.test(tel_value)){
                            _self.layerInfo("手机号格式错误，请重新输入！");
                            return false;
                        }

                        $(this).attr("disabled","disabled");
                        // 请求发送验证码...
                        $.post('./sendcode',{'mobile':tel_value},function(d){
                            if(d.error == 0){
                                // 成功...
                                var timer = setInterval(function(){
                                    if(_time > 0){
                                        _time--;
                                        $("#getBtn").addClass("btn_actived").html(_time + 's');
                                        flag = true;
                                    } else {
                                        $("#getBtn").html(重新发送).removeClass("btn_actived").removeAttr("disabled");
                                        clearInterval(timer);
                                    }
                                },1000);
                            }else{
                                _self.layerInfo(d.msg);
                                return false;
                            }
                        },'json');
                                                
                        
                    });

                    // 提交...
                    $("#submitBtn").on("click",function(){
                        var tel_val = $("#tel_value").val();
                        var yzm_val = $("#yzm_value").val();
                        var openid = $("#openid").val();
                        if(tel_val.length === 0 || tel_val.length !== 11 || yzm_val.length === 0){
                            _self.layerInfo("请完善信息后再提交！");
                            return false;
                        }
                        if(!flag){
                            _self.layerInfo("非法提交！");
                            return false;
                        }

                        // 提交信息注册...
                        $.post('./doauth',{'mobile':tel_val,'code':yzm_val,'openid':openid},function(d){
                        	if(d.status == 1000){
                        		_self.layerInfo(d.msg);
	                    		location.href = "<?php echo U('user/index');?>";
                        	}else{
                        		_self.layerInfo(d.msg);
                        	}

                        },'json');

                    });
                },
                layerInfo : function(str){
                    layer.open({
                        skin :'msg',
                        content : str ,
                        time :3
                    });
                }
            });
            
            var page = new Page();
            page.init();
    
        })
    </script>   
</body>
</html>